import { Fragment, useEffect, useMemo, useState } from "react";

export default function SearchUserList(){
  const [users,setUsers] = useState(null);
  const [searchKey,setSearchKey] = useState("")
  useEffect(()=>{
    const doFetch = async () => {
      const res = await fetch("https://reqres.in/api/users");
      setUsers(await res.json());
    }
    doFetch()
  },[])

  const usersToShow = useMemo(()=>{
    if (!users) return null;
    return (
      users.data.filter((user) => user.first_name.includes(searchKey))
    )
  },[users,searchKey])

  return (
    <Fragment>
      <div>
        <input type="text"  value={searchKey} onChange={evt => setSearchKey(evt.target.value)} />
        <ul>
          {usersToShow && usersToShow.length > 0 && usersToShow.map((user)=>{return <li key={user.id}>{user.first_name}</li>})}
        </ul>
      </div>
    </Fragment>
  )
}